<template>
  <div class="card-out-container">
    <a-form layout="inline" class="multi-line-search-form" v-if="showMore" id="logSearchBoxId">
      <template v-for="(item , index) in logParams" :key="index">
        <a-form-item :label="item.title" v-if="item.show">
          <a-input v-if="item.type=='input'" :maxLength="item.maxLength" v-model:value.trim="queryParam[item.key]" :placeholder="`${$t('common.pleaseInput')} ${item.title}`" @keyup.enter="loadData" allowClear />
          <a-select v-model:value="queryParam[item.key]" :placeholder="`${$t('common.pleaseSelect')}${item.title}`" v-if="item.type == 'select'" allowClear mode="multiple">
            <a-select-option v-for="(el,i) in getSelectOpt(item.key)" :value="el.name || el.key" :key="i">{{ el.name|| el.label }}</a-select-option>
          </a-select>
          <a-tree-select v-if="item.type == 'treeSelect'" v-model:value="queryParam[item.key]" v-model:searchValue="searchValue" :filterTreeNode="filterTreeOption" show-search style="width: 200px" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="$t('sysManage.selectMenu')" allow-clear tree-default-expand-all :tree-data="treeData" :fieldNames="fieldNames" />
          <a-range-picker v-if="item.type=='time'" v-model:value="queryParam[item.key]" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </a-form-item>
      </template>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
          <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
          <a-button type="link" @click="filterSearch">{{$t('common.filterConfig')}}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <CustomTable storeTableName="sysLogfList" rowKey="id" :loading="loading" :dataSource="dataSource" :columns="columns" :pagination="ipagination" :scroll="{ x:1000,  y: tableHeight}" @change="handleTableChange" :operateMargin="true" :showMore="showMore">
      <template #operateLeft>
        <div class="operate-left"> </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('sysManage.operator')" v-if="!showMore" @search="loadData" />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{$t('common.highFilter')}}</a-button>
        </div>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'requestUrl'">
          <span v-if="scope.record.requestUrl && `${scope.record.requestUrl}`.length<=23"> {{scope.record.requestUrl}}</span>
          <a-tooltip v-else>
            <template #title>
              <span>{{scope.record.requestUrl}}</span>
            </template>
            <span>{{scope.record.requestUrl && `${scope.record.requestUrl}`.substr(0,20)+ '...'}}</span>
          </a-tooltip>
        </template>
        <template v-if="scope.column.key === 'resultCode'">
          <span> {{ scope.record.resultCode  == 200 ? $t('sysManage.succeed') : $t('sysManage.err') }}</span>
        </template>

        <template v-if="scope.column.key === 'javaMethodArgs'">
          <span v-if="scope.record.javaMethodArgs && `${scope.record.javaMethodArgs}`.length<=10"> {{scope.record.javaMethodArgs}}</span>
          <a-tooltip v-else>
            <template #title>
              <span>{{scope.record.javaMethodArgs}}</span>
            </template>
            <span>{{scope.record.javaMethodArgs && `${scope.record.javaMethodArgs}`.substr(0,7)+ '...'}}</span>
          </a-tooltip>
        </template>
        <template v-if="scope.column.key === 'resultData'">
          <span v-if="scope.record.resultData && `${scope.record.resultData}`.length<=10"> {{scope.record.resultData}}</span>
          <a-tooltip v-else>
            <template #title>
              <span>{{scope.record.resultData}}</span>
            </template>
            <span>{{scope.record.resultData && `${scope.record.resultData}`.substr(0,7)+ '...'}}</span>
          </a-tooltip>
        </template>
      </template>
    </CustomTable>
    <FilterParamsModal ref="filterParamsModalRef" @ok="onParamsConfigOK" />
  </div>
</template>

<script>
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns, logParams } from './modules/config'
import { hasPermission, filterObj, getLocalStorage, startTimeValue, endTimeValue } from '@/utils'
import CustomTable from '@/components/commonTable/customTable.vue'
import FilterParamsModal from '@/components/filterParamsModal/filterParamsModal.vue'
export default {
  name: 'sysStaff',
  mixins: [ListMixinPm],
  components: { CustomTable, FilterParamsModal },
  data () {
    return {
      url: {
        list: '/api/system/operate-log/list'
      },
      columns,
      fuzzySearchName: 'createBy',
      logParams: [],
      searchValue: '',
      treeData: [],
      fieldNames: {
        label: 'label',
        value: 'label',
        children: 'children'
      },
      resultCodeListAry: [
        { key: 200, label: this.$t('sysManage.succeed') },
        { key: 500, label: this.$t('sysManage.err') },
      ],
      searchTimeAry: ['Time']
    }
  },
  methods: {
    hasPermission,
    getSelectOpt (key) {
      return this[`${key}Ary`]
    },
    getQueryParams () {
      let param = this.showMore ? cloneDeep(this.queryParam) : {}
      if (!this.showMore) param[this.fuzzySearchName] = this.fuzzySearch
      param.createBy = param.createBy ? param.createBy : (getLocalStorage('user') || {}).userName
      if (this.queryParam.time && this.queryParam.time.length) {
        param.startTime = startTimeValue(this.queryParam.time[0])
        param.endTime = endTimeValue(this.queryParam.time[1])
      }
      delete param.time
      if (this.queryParam['resultCodeList'] && !this.queryParam['resultCodeList'].length) param['resultCodeList'] = null
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return param.createBy ? filterObj(param) : null
    },
    initTableHeight () {
      this.$nextTick(() => {
        if (this.showMore) {
          let formHeight = `${document.getElementById('logSearchBoxId').clientHeight + 340}px`
          this.tableHeight = `calc(100vh - ${formHeight})`
        } else {
          this.tableHeight = 'calc(100vh - 320px)'
        }
      })
    },
    filterSearch () {
      this.$refs.filterParamsModalRef.open(this.logParams)
    },
    onParamsConfigOK (checkedAry) {
      this.logParams.forEach(i => {
        i.show = checkedAry.includes(i.key)
      })
      localStorage.setItem('logParams', JSON.stringify(this.logParams))
      this.initTableHeight()
    },
    filterTreeOption (input, treeNode) {
      return treeNode.label.includes(input)
    },
    initTreeData (data) {
      data.forEach(i => {
        if (i.children) {
          if (i.children.some(el => el.type == 2)) {
            i.children = []
          } else {
            i.children = i.children.filter(el => el.visible)
            this.initTreeData(i.children)
          }
        }
      })
      this.treeData = data
    },
    async getTreeData () {
      const res = await axios.postAction('/api/system/menu/treeselect', {})
      if (res.success) this.initTreeData(res.data)
    }
  },
  async created () {
    this.logParams = getLocalStorage('logParams') || logParams
    await this.getTreeData()
  }
}
</script>